<template>
<el-drawer :title="drawer.title" :visible.sync="drawer.visible" append-to-body direction="rtl" custom-class="drawer-right-side" size="70%" :withHeader="false">
    <div class="drawer-box">
        <order-header :order="order" :bom="bom" :vip="vip"></order-header>

        <div class="tab-box">
            <el-tabs v-model="activeName" @tab-click="changeTab">
                <el-tab-pane label="订单" name="order">
                    <order-bom :bom="bom" :order="order"></order-bom>
                    <order-customer :customer="customer" :allocate="allocate" :contactList="contactList"></order-customer>
                </el-tab-pane>

                <el-tab-pane label="收款" name="income">
                    <order-income :order="order" ref="incomeListRef"></order-income>
                </el-tab-pane>

                <el-tab-pane label="二销" name="suborder">
                    <sub-order :order="order" ref="suborderRef"></sub-order>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</el-drawer>
</template>

<script>
import {
    getOrderDetailApi
} from "@/api/order/order.js";

// 订单详情
import orderHeader from './component/order-header.vue';
import orderBom from './component/order-bom.vue'
import orderCustomer from './component/order-customer.vue';

// 收款
import orderIncome from './component/order-income.vue';
import { order, vip, bom } from './model.js';

// 二销
import subOrder from './component/order-suborder.vue';

export default {
    components: {
        orderHeader,
        orderBom,
        orderCustomer,
        orderIncome,
        subOrder
    },
    data() {
        return {
            drawer: {
                title: "客资详情",
                visible: false,
            },
            activeName: "order",
            images: [],
            order: JSON.parse(JSON.stringify(order)),
            customer: {
                id: '',
                fullname: '',
                creator: {
                    id: '',
                    realname: ''
                },
                source: {
                    id: '',
                    title: ''
                }
            },
            allocate: {
                id: '',
                user: {
                    id: '',
                    realname: ''
                }
            },
            contactList: [],
            vip: JSON.parse(JSON.stringify(vip)),
            bom: JSON.parse(JSON.stringify(bom)),
        };
    },
    methods: {
        showDrawer(id) {
            this.activeName = 'order';
            this.drawer.visible = true;
            getOrderDetailApi({
                id: id
            }).then(res => {
                if (res.code != '200') {
                    this.$message.error(res.msg);
                    return;
                }

                this.order = res.data.order;

                // 同步图片 this.images = this.order.files.map(e => e.url);
                this.customer = res.data.customer;
                this.allocate = res.data.allocate;
                this.contactList = res.data.contactList;

                // 客人信息
                this.vip = res.data.vip;
                // 订单详情
                this.bom = res.data.bom;

            }).catch(res => {
                this.$message.error(res);
            });
        },
        closeDrawer() {
            this.drawer.visible = false;
        },
        changeTab(tab) {
            switch (tab.name) {
                case 'order':
                    break;
                case 'income':
                    this.$nextTick(() => {
                        this.$refs['incomeListRef'].getList();
                    });
                    break;
                case 'suborder':
                    this.$nextTick(() => {
                        this.$refs['suborderRef'].getList();
                    });
                    break;
            }
        }
    },
};
</script>

<style lang="scss">
.tab-box {
    height: calc(100vh - 265px);
    padding: 20px;
    overflow: auto;
}
</style>
